<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <script type="text/javascript" th:src="@{/pyd/js/rem.js}"></script>
    <link rel="stylesheet" th:href="@{/pyd/css/style.css}">
    <title>小区用户门禁管理</title>
</head>

<style>
    .wrap{ height:2.54rem; overflow: hidden;}
    .wrap li{  line-height:.42rem; height:.42rem; font-size: .18rem; text-indent: .24rem; margin-bottom: .1rem; }
    .wrap li p{border: 1px solid rgba(25,186,139,.17);color: rgba(255,255,255,.6); }
</style>


<body style="visibility: hidden;">
<div class="container-flex" tabindex="0" hidefocus="true">
    <div class="box-left">
        <div class="left-top">
            <div class="current-num">
                <div>当前比对数据</div>
                <p>3,456,789</p>
            </div>
        </div>
        <div class="left-center">
            <div class="title-box">
                <h6>人员分析</h6>
            </div>
            <div class="chart-box pie-chart" style="">
                <div id="pie_fanzui" style="width:100%;"></div>

            </div>
        </div>
        <div class="left-bottom select">
            <div class="title-box">
                <h6>人口出入记录</h6>

            </div>
            <div class="chart-box">
                <div class="wrap">
                    <ul id="keshihuaList6">

                    </ul>
                </div>
                <div class="boxfoot"></div>

            </div>
        </div>
    </div>
    <div class="box-center">
        <div class="center-top">
            <h1>小区用户门禁管理</h1>
        </div>
        <div class="center-center">
            <div class="weather-box">
                <div class="data">
                    <p class="time" id="time">00:00:00</p>
                    <p id="date"></p>
                </div>
                <div class="weather">
                    <img id="weatherImg" th:src="@{/pyd/images/weather/weather_img01.png}" alt="">
                    <div id="weather">
                        <p class="active" id="tianqi">多云</p>
                        <p id="wendu">16-22℃</p>
                        <p id="diqu">天津市和平区</p>
                    </div>
                </div>
            </div>
            <img th:src="@{/pyd/images/line_bg.png}" alt="">
            <div class="select-box" style="height: 0.3rem;">

                <div data-type="2">
                    <div class="select" tabindex="0" hidefocus="true" >
                        <p style="color:#FFFF00;font-weight:bold;">NO.1北京：2543289人</p>
                        <p style="color:#7FFF00;font-weight:bold;">NO.1天津： 5690人</p>
                        <p style="color:#7FFFD4;font-weight:bold;">NO.1河北： 456人</p>
                    </div>

                </div>
            </div>
        </div>
        <div class="center-bottom">
            <div class="chart-box">
                <div id="china_map" style="width:100%;height:95%;"></div>
            </div>

        </div>

    </div>
    <div class="box-right">
        <div class="right-top">
            <div class="title-box">
                <h6 id="barTitle">人员年龄分布</h6>

            </div>
            <p class="unit">单位：岁</p>
            <div class="chart-box">
                <div id="pie_age" style="width:100%;height:100%;"></div>
            </div>

        </div>
        <div class="right-center">

            <div class="title-box">
                <h6>人员地区分布</h6>
            </div>
            <div class="chart-box pie-chart">

                <div id="qufenbu_data"style="width:90%;height:120px;margin-left:10px;"></div>

            </div>
        </div>


        <div class="right-bottom">
            <div class="title-box">
                <p id="switchBtn"><span class="active" data-dataType="income">人口出入时间段统计</span></p>

            </div>
            <div id="line_time" style="width:90%;height:160px;margin-left:10px;"></div>

        </div>
    </div>
</div>

</body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<!--<script type="text/javascript" th:src="@{/pyd/js/jquery-1.10.2.js}"></script>-->
<script type="text/javascript" th:src="@{/pyd/js/echarts.min.js}"></script>

<script type="text/javascript" th:src="@{/pyd/js/layer/layer.min.js}"></script>
<script type="text/javascript" th:src="@{/pyd/js/layer/laydate/laydate.js}"></script>
<!--<script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"></script>-->

<script type="text/javascript" th:src="@{/pyd/js/china.js}"></script>
<script type="text/javascript" th:src="@{/pyd/js/infographic.js}"></script>
<script type="text/javascript" th:src="@{/pyd/js/macarons.js}"></script>
<script type="text/javascript" th:src="@{/pyd/js/shine.js}"></script>
<script type="text/javascript" th:src="@{/pyd/js/base.js}"></script>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    $('document').ready(function () {
        $("body").css('visibility', 'visible');
        var localData = [$('#teacher').val(), $('#start').val() + '/' + $('#end').val(), $('#leader').val()]
        localStorage.setItem("data", localData);

    })
    $(function () {

        $.ajax({
            type: "post",
            url: "/personne/list",
            data: {},
            success: function(data) {
                console.info(data)
                //人员分析占比，带边框效果的饼图
                var personneList1=[];
                var personneList1_1=[];
                $.each(data.personneList,function (index,value) {
                    personneList1.push(value.userProfession);
                    personneList1_1.push({"name":value.userProfession,"value":value.countList});
                })
                pie_fanzui(personneList1,personneList1_1);
                //-------平台用户兴趣时长
                show4();
                $.each(data.personneList2,function (index,value) {
                    $("#keshihuaList6").append('<li><p>'+value.userName+' - '+value.userProfession+' - '+value.doorType+' - '
                        +value.doorTime+'</p></li>');
                })

                //人员年龄分析占比，带边框效果的饼图
                var personneList3=[];
                var personneList3_1=[];
                personneList3.push("18~30");
                personneList3.push("31~40");
                personneList3.push("41~50");
                personneList3.push("51岁以上");
                var q=0;
                var w=0;
                var e=0;
                var r=0;
                $.each(data.personneList3,function (index,value) {
                    if(value.userAge>=18 && value.userAge<=30){
                        q+=1;
                    }
                    if(value.userAge>=31 && value.userAge<=40){
                        w+=1;
                    }
                    if(value.userAge>=41 && value.userAge<=50){
                        e+=1;
                    }
                    if(value.userAge>=51 ){
                        r+=1;
                    }
                })
                personneList3_1.push({"name":"18~30","value":q});
                personneList3_1.push({"name":"31~40","value":w});
                personneList3_1.push({"name":"41~50","value":e});
                personneList3_1.push({"name":"51岁以上","value":r});
                pie_age(personneList3,personneList3_1);

                //=========人员地区分布开始=======================
                var personneList4=[];
                var personneList4_1=[];
                $.each(data.personneList4,function (index,value) {
                    personneList4.push(value.userRegion);
                    personneList4_1.push(value.countList);
                })
                qufenbu_data(personneList4,personneList4_1);

                //===================人口出入时间段统计
                var personneList5=["1:00-9:00","9:00-12:00","12:00-18:00","18:00-00:00"];
                var personneList5_1=[];
                var q=0;
                var w=0;
                var e=0;
                var r=0;
                $.each(data.personneList2,function (index,value) {
                    var mydate = new Date(value.doorTime);
                    var h= mydate.getHours();
                    if(h>=1 && h<=8){
                        q+=1;
                    }
                    if(h>=9 && h<=11){
                        w+=1;
                    }
                    if(h>=12 && h<=17){
                        e+=1;
                    }
                    if(h>=18){
                        r+=1;
                    }
                    personneList5_1=[q,w,e,r];
                })
                line_time(personneList5,personneList5_1);
                findWeather();
                // http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&city=广州&day=0&dfc=3
            }
        })
    })

    function show4(){
        $(document).ready(function(){
            var html=$(".wrap ul").html()
            $(".wrap ul").append(html)
            var ls=$(".wrap li").length/2+1
            i=0
            ref = setInterval(function(){
                i++
                if(i==ls){
                    i=1
                    $(".wrap ul").css({marginTop:0})
                    $(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
                }
                $(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
            },2400);
            var html2=$(".adduser ul").html()
            $(".adduser ul").append(html2)
            var ls2=$(".adduser li").length/2+1
            a=0
            ref = setInterval(function(){
                a++
                if(a==ls2){
                    a=1
                    $(".adduser ul").css({marginTop:0})
                    $(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)
                }
                $(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)
            },4300);
        })
    }

    function findWeather() {
        //网上的天气接口
        $.ajax({
            url: "https://api.asilu.com/weather/",
            type:'GET',
            dataType:'jsonp',
            data:{
                "city":"广州",
                "key":"adfdb863ddb1101bb6b40c0700d6203b",
            },
            success: function(data) {
                console.info(data)
                console.info(data.weather[0])
                $("#wendu").text(data.weather[0].temp);
                $("#diqu").text(data.city);
                $("#tianqi").text(data.weather[0].weather);
            }
        });
    }


</script>



</html>
